<template>
  <el-dialog
    @close="handleClose"
    title="Terminal list"
    width="500px"
    bodyStyle="padding:0px;"
  >
    <el-card
      shadow="never"
      :body-style="{ padding: '0px' }"
      :page-size="pageSize"
      :total="rows"
      :current-page="pageNo"
      @current-change="currentChangeHandle"
    >
      <el-table
        :data="dataList"
        v-loading="dataListLoading"
        ref="multipleTable"
        @selection-change="handleSelectionChange"
        stripe
      >
        <el-table-column prop="devSn" :label="$t('device.sn')">
        </el-table-column>
      </el-table>
    </el-card>

    <!-- <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageNo"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="rows"
      style="margin-left: 2%; margin-top: 1%"
      layout="total, sizes, prev, pager, next, jumper"
    >
    </el-pagination> -->
  </el-dialog>
</template>

<script>
import { grayscalePage } from '@/api/sysapp'

export default {
  data() {
    return {
      dataForm: {
        operatorName: '',
        appPkgName: '',
        pubKey: '',
        remark: ''
      },
      dataList: [],
      dataListSelections: [],
      dataListLoading: false,
      pageNo: 1,
      pageSize: 10,
      rows: 0
    }
  },
  created() {},
  methods: {
    init(id) {
      this.id = id
      this.pageNo = 1
      this.getDataList()
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageNo = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle(val) {
      console.log(val)
      this.pageNo = val
      this.getDataList()
    },
    getDataList() {
      this.dataListLoading = true
      grayscalePage(this.id, { pageNo: this.pageNo, pageSize: this.pageSize })
        .then((data) => {
          this.dataList = data.data
          console.log(this.dataList)
          this.rows = data.rows
          this.dataListLoading = false
        })
        .catch((e) => {
          this.$confirmError(e)
          this.dataListLoading = false
        })
    },
    handleSelectionChange(val) {
      this.dataListSelections = val
    },
    handleClose() {
      this.$emit('update:model-value', false)
    }
  }
}
</script>
